<template>
  <div class="css2_1">
      <h1>2.1 选择器</h1>
      <div class="css2_1_1">
          <h2>元素选择器：每个元素名</h2>
          <p>
              <pre>
                  示例：用元素选择器选择了p标签字颜色为红色
&lt;style>
        p{
            color: red;
        }
&lt;/style>
&lt;body>
    &lt;p>这是p&lt;/p>
    &lt;div>这是div&lt;/div>
&lt;/body>
              </pre>
          </p>
         <img src="../assets/images/3.1.png" alt="">
      </div>
      <div class="css2_1_2">
          <h2>通用选择器：*（一般结合其他选择器出现）</h2>
          <p>
              <pre>
                  示例：用通用选择器选择了所有标签字颜色为红色
&lt;style>
        *{
            color: red;
        }
&lt;/style>
&lt;body>
    &lt;p>这是p&lt;/p>
    &lt;div>这是div&lt;/div>
&lt;/body>
              </pre>
          </p>
         <img src="../assets/images/3.2.png" alt="">
      </div>
      <div class="css2_1_3">
          <h2>类选择器：.类名</h2>
      </div>
      <div class="css2_1_4">
          <h2>id选择器：#id</h2> 
          <p>
              <pre>
                  示例：用类选择器选择了叫clas的div字颜色为红色，id选择器选择了叫idd的div字颜色为红色
&lt;style>
        .clas{
            color: red;
        }
        #idd{
            color: blue;
        }
&lt;/style>
&lt;body>
    &lt;div class="clas">这是类选择&lt;/div>
    &lt;div id="idd">这是id选择&lt;/div>
&lt;/body>
              </pre>
          </p>
         <img src="../assets/images/3.3.png" alt="">
      </div>
      <div class="css2_1_5">
          <p>
              <pre>
                  ----------> 比较常用
        该类型 li 的第一个、
        ul > li:first-of-type{ color: red; }
        该类型 li 的最后一个、
        ul > li:last-of-type{ color:  blue; }
该类型 li 的指定个、
        ul > li:nth-of-type(3){ color:green; }
示例：
&lt;style>
        ul > li:first-of-type{ color: red; }
        ul > li:last-of-type{ color: blue; }
        ul > li:nth-of-type(3){ color: green; }
&lt;/style>
&lt;body>
     &lt;ul>
       &lt;li>第一个&lt;/li>
       &lt;li>第二个&lt;/li>
       &lt;li>第三个&lt;/li>
   &lt;/ul>
&lt;/body>
              </pre>
          </p>
         <img style="width:200px;margin-left:400px" src="../assets/images/3.4.png" alt="">
         <p></p>
         <p>
             <pre>
                该类型 li 在同级下只有一个时选中、(独生子、特有)
        ul > li:only-of-type{ color: red; }
该类型指定从第几个开始
        		ul > li:nth-of-type(n+2){ color: yellow; } 
示例：
&lt;style>
               ul > li:nth-of-type(n+2){ color: yellow; } 
&lt;/style>
&lt;body>
     &lt;ul>
       &lt;li>第一个&lt;/li>
       &lt;li>第二个&lt;/li>
       &lt;li>第三个&lt;/li>
       &lt;li>第四个&lt;/li>
       &lt;li>第五个&lt;/li>
   &lt;/ul>
&lt;/body> 
             </pre>
         </p>
         <img style="width:200px;margin-left:400px" src="../assets/images/3.5.png" alt="">
         <p></p>
         <p>
             <pre>
                 该类型的奇数
        ul > li:nth-of-type(odd){ color: red; }
该类型的偶数
        ul > li:nth-of-type(even){ color: blue; }
示例：
&lt;style>
        ul > li:nth-of-type(odd){ color: red; }
        ul > li:nth-of-type(even){ color: blue; }
&lt;/style>
&lt;body>
     &lt;ul>
       &lt;li>第一个&lt;/li>
       &lt;li>第二个&lt;/li>
       &lt;li>第三个&lt;/li>
       &lt;li>第四个&lt;/li>
       &lt;li>第五个&lt;/li>
   &lt;/ul>
&lt;/body>
             </pre>
         </p>
         <img style="width:200px;margin-left:400px" src="../assets/images/3.6.png" alt="">
         <p></p>
         <p>
             <pre>
                 选中div标签为空节点的、&lt;div>&lt;/div> &lt;div>&lt;!-- 注释在css中不算节点，但空格算 -->&lt;/div>
        div:empty{
            background-color: red;
        }
        当前input是复选框、这个实例是点击input触发checked状态的css，
        当前input:checked+span在被触发时就可以选中下一个为span的标签了，并且利用它改变css样式、
        input:checked + span{
            background-color: red;
        }
        input:checked + span::after{
            content:" Hello Wrold~ ";
            color: #ccc;
        }
示例：
&lt;style>
        input:checked + span{
            background-color: red;
        }
        input:checked + span::after{
            content:" Hello Wrold~ ";
            color: #ccc;
        }
&lt;/style>
&lt;body>
    &lt;input type="checkbox">
    &lt;span>123&lt;/span>
&lt;/body>
             </pre>
         </p>
         <video src="../assets/c3实例视频/input.mp4" width="600px" controls></video>
                <img style="width:150px;margin-left:300px" src="../assets/images/3.7.png" alt="">
                <img style="width:300px;margin-left:0px;" src="../assets/images/3.8.png" alt="">
                <p></p>
                <p>
                    <pre>
                         disabled是选中被禁止状态的标签，    &lt;input type="text" disabled>
        input:disabled{
            background-color: red;
        }
        选中被禁止修改状态的标签、          &lt;input type="text" readonly value="这个是禁止修改的状态。可以选择，但不能删改(只读)">
        input:read-only{
            color: red;
        }
示例：
&lt;style>
      input:disabled{
            background-color: red;
        }
      input:read-only{
            color: red;
        }
&lt;/style>
&lt;body>
   &lt;input type="text" disabled>
    &lt;input type="text" readonly value="这个是禁止修改的状态。可以选择，但不能删改(只读)">
&lt;/body>
                    </pre>
                </p>
                <video src="../assets/c3实例视频/input disabled.mp4" width="600px" controls></video>
                <img src="../assets/images/3.9.png" alt="">
                <p></p>
                <h2>伪类选择器: (被选中元素的一种状态)</h2>
                <p>
                    <pre>
E:nol(s)  选中除了最后一个 :last-of-type 的所有li元素、
        ul li:nol(:last-of-type) {
            border-bottom: 1px solid red;
        }
        选中 根标签、相当于html 绝对最父级、
        :root{
            background-color:red;
        }
        被锚点触发的状态样式、&lt;a href="#div">点击后&lt;/a>
        div:target{
            color: red;
        }

        li --> 选中同级下第一个
        ul > li:first-child {}
        li --> 选中同级下最后一个
        ul > li:last-child {}
        选中ul里面只有单独一个的li (独生子)
        ul > li:only-child {
            color: red;
        }

        选中指定的li(css索引从1开始)
        ul > li:nth-child(3) {
            color: red;
        }
        选中奇数的li(css索引从1开始、但n是自然数，它是从0开始的)
        或者 :nth-child(add)
        ul > li:nth-child(2n+1) {
            color: red;
        }
        选中偶数的li、
        或者 :nth-child(even)
        ul > li:nth-child(2n) {
            color: red;
        }
        倒过来，选中最后一个、
        ul > li:nth-last-child(1) {
            color: red;
        }
        ---------- 以上都考虑其他元素，对它的影响、比如说选中第一个 li:nth-child(1) 但同级元素下第一个实际为span标签、那么不会选到、

----------  不太常用  ----------
        选中div下一个兄弟元素节点p、
        div + p {
            background: red;
        }
                    </pre>
                </p>
                <img src="../assets/images/3.10.png" alt="">
                <p></p>
                <p>
                    <pre>
                        选中div下面所有为p的兄弟元素节点p，并列结构下、
        div ~ p {
            background: red;
        }
                    </pre>
                </p>
                <img src="../assets/images/3.11.png" alt="">
                <p></p>
                <p>
                    <pre>
                        选中属性值包含a(两边有单词边界)的元素、
        div[data~="a"] {
            background: red;
        }
        选中 a 开头，或者 a- 开头的元素、
        div[data|="a"] {
            background: red;
        }
        选中以a开头的元素、
        div[data^="a"] {
            background: red;
        }
        选中以a结尾的元素、
        div[data$="a"] {
            background: red;
        }
        选中只要包含a的任意元素、
        div[data*="a"] {
            background: red;
        }

        ---> 兼容性差、改变input提示颜色、
        input::placeholder {
            color: red;
        }
        改变字体文本选中后的样式、
        div::selection {
            只能设置三个样式
            color: red;
            background-color: red;
            text-shadow: red; -- 阴影
                    </pre>
                </p>
      </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>